/<template>
  <div class="user">
    <button @click="addUser">新增</button>
    <input type="text" v-model="val">
    <button @click="search">搜索</button>
      <el-table
        :data="userList"
        border
        style="width: 100%">
        <el-table-column
          fixed
          prop="username"
          label="用户名"
          width="150">
        </el-table-column>
        <el-table-column
          prop="nickname"
          label="昵称"
          width="120">
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="120">
        </el-table-column>
        <el-table-column
          prop="tel"
          label="电话"
          width="120">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="100">
          <template slot-scope="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                <el-button type="text" size="small" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="用户信息" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="姓名" :label-width="formLabelWidth">
            <el-input v-model="form.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="昵称" :label-width="formLabelWidth">
            <el-input v-model="form.nickname" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="sure">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>

<script>

import {mapState,mapActions} from "vuex"

import {del_user,sure_user} from "../../api/api"

export default {
  data () {
    return {
        dialogFormVisible :false,
        formLabelWidth:"100px",
        id:"",
        val:"",
        form:{
          username:"",
          nickname:""
        }
    }
  },
  computed: {
    ...mapState("user",["userList"])
  },
  mounted () {
      this.get_list_action()
  },
  methods: {
    ...mapActions("user",["get_list_action","get_search_list"]),
    // 搜索
    search(){
        this.get_search_list(this.val)
    },
    // 编辑
    handleClick(rows){
      this.id=rows.id
      this.form.username=rows.username
      this.form.nickname=rows.nickname
      // 弹框显示
      this.dialogFormVisible =true
    },
    // 点击确定
    async sure(){
      let {data}=await sure_user({id:this.id,username:this.form.username,nickname:this.form.nickname})
      if(data.code=="1001"){
        this.dialogFormVisible =false
        this.get_list_action()
      }
      
    },
    // 增加
    addUser(){
      this.$router.push('/home/adduser')
    },
    // 删除
    async del(rows){
      let {data}=await del_user(rows.id)
      if(data.code=="1001"){
          this.get_list_action()
      }
    }
  }
}
</script>

<style>

</style>